<template>
  <div class="cloud-music-login">
    <el-dialog title="网易云音乐登录" :visible.sync="isShowLoginFrame" class="music-login" append-to-body
               @close="closeShow"
    >
      <el-tabs v-model="activeName" @tab-click="selectLoginType">
        <el-tab-pane label="手机号登录" name="phone-login">
          <el-form :model="LoginInfo" :rules="rules" ref="LoginInfo">
            <el-form-item prop="phone" required>
              <el-input placeholder="请输入手机号" clearable v-model="LoginInfo.phone" @keyup.enter.native="EnterSubmitForm"
                        prefix-icon="el-icon-lock" autocomplete="off" class="music-login-input"></el-input>
            </el-form-item>
            <el-form-item prop="password" required>
              <el-input placeholder="密码" clearable show-password v-model="LoginInfo.password" @keyup.enter.native="EnterSubmitForm"
                        prefix-icon="el-icon-lock" type="password" autocomplete="off"
                        class="music-login-input"></el-input>
            </el-form-item>
              <div class="btn">
                        <el-button @click="closeShow" class="cancel-btn">取 消</el-button>
        <el-button type="primary" @click="MusicLoginSubmitForm('LoginInfo')"  class="ok-btn">登录</el-button>
              </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="二维码登录" name="QR-code-login">二维码登录</el-tab-pane>

      </el-tabs>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "musicLogin",
  data() {
    // 校验手机号格式
    const validatePhone = (rule, value, callback) => {
      var pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!pattern.test(value)) {
        console.log('校验不通过')
        callback(new Error('手机号码格式不正确'))
      } else {
        callback()
      }
    }
    //校验密码
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {

      // //  是否显示登录界面
      isShowLoginFrame: true,
      //标签页的默认选中
      activeName: "phone-login",
      //登录信息
      LoginInfo: {
        phone: '',
        password: ''
      },

      //  输入校验
      rules: {
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {validator: validatePhone, trigger: 'blur'}

        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {validator: validatePassword, trigger: 'blur'}
        ]
      },
    }
  },
  methods: {
    //请求登录
   async RequestLogin(){
     //重写封装请求参数
     let params =  {...this.LoginInfo}
     //添加时间戳
      let timestamp = Date.parse(new Date());
     params.withCredentials = true;
     params.timestamp  =timestamp;
     console.log(params)
      let res = await  this.$request('/login/cellphone',this.LoginInfo)
     //登录成功
     if (res.data.code===200){
       this.$store.commit('MusicStore/updateLoginUserInfo',res.data)
     //  保存登录用户ID
       window.localStorage.setItem('USERID',res.data.profile.userId);
       //保存cookie，用于验证登录
       window.localStorage.setItem('USERCOOKIE',res.data.cookie);
       this.$store.commit('MusicStore/updataLoginState',true);
       //将信息传回父组件
       //this.$emit("getUserInfo", result.data.profile);
       this.$emit('GetLoginUserInfo',res.data.profile)
       //修改Vuex中的登录状态
       this.$store.commit('MusicStore/updataLoginState',true)
       //  关闭登录框
       this.closeShow();
     }else if(res.data.code===400){
       layer.msg('手机号错误',{
         icon:2,
         time:1500
       })
     }else if(res.data.code===502){
       layer.msg('密码错误',{
         icon:2,
         time:1500
       })
     }else {
       layer.msg('登陆失败',{
         icon:2,
         time:1500
       })
     }

    },
    //回车键回调
    EnterSubmitForm(e){
      console.log('回车键',e)
      if (e.keyCode===13){
        this.MusicLoginSubmitForm('LoginInfo')
      }
    },
    //登录回调,表单验证
    MusicLoginSubmitForm(FormName) {
      this.$refs[FormName].validate(valid=>{
        if (valid){
          if(FormName==='LoginInfo'){
            this.RequestLogin()
          }
        }
        else return false;
      })


    },
    //点击登录方式切换的回调
    selectLoginType(tab, event) {
      console.log(tab, event)

    },
    //  关闭时的回调
    closeShow() {
      // this.isShowLoginFrame=false;
      //   向父组件传值
      this.$emit('isShowLoginFrame', false)
    }
  },
  // //接收父组件传值
  // props:['isShowLoginFrame'],
  created() {
    //获取
  }
}
</script>

<style scoped lang="less">
.music-login {
  /deep/ .el-dialog {
    width: 25% !important;
  }

  /deep/ .el-dialog__header {
    width: 100% !important;
  }

  /deep/ .el-form {
    padding: 10px !important;
    margin: 10px !important;
  }
  .btn{
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center!important;

  }
}

</style>
